<template>
  <section class="index_nav">
    <nav class="index_nav">
      <img class="logo" src="../assets/imgs/logo.png">
      <span class="vue_title" title="人物图谱">关系图谱</span>
      <span
        class="nav_title"
        :class="{'coler_height':nowShow=='search'}"
        @click="changeShow('search')"
        title="关系查找"
      >关系查找</span>
      <span
        class="nav_title"
        :class="{'coler_height':nowShow=='analyse'}"
        @click="changeShow('analyse')"
        title="关系分析"
      >关系分析</span>
      <!--<span class="nav_title" title="刷新">刷新</span>-->
      <span class="nav_title_input">
        <input
          type="text"
          name
          id
          value
          placeholder="请输入身份证"
          v-model="form.input1"
          class="title_input"
          @keyup.enter="cliclSearchImg"
        >
        <img src="../assets/imgs/search_input.png" class="search_input_img" @click="cliclSearchImg">
      </span>
      <p class="score_val" :title="scoreValAll">
        <span v-for="(item,index) in scoreVal" :key="index">{{item.label}}:{{item.score}}分</span>
      </p>

      <!--<img class="off" src="../assets/imgs/tupu06.png"/>-->
      <span class="user">admin</span>
    </nav>
  </section>
</template>

<script>
import { getURLinfo, getScoreVal } from "@/components/api";
export default {
  data() {
    return {
      form: {
        input1: ""
      },
      nowShow: "analyse" /*现在显示的是*/,
      scoreVal: [] /*分值*/
    };
  },
  methods: {
    cliclSearchImg() {
      this.$emit("cliclSearchImg", this.form.input1);
    },
    changeShow(val) {
      this.nowShow = val;
      this.$emit("changeShow", val);
    }
  },
  mounted() {
    //      	setTimeout(()=>{
    getURLinfo(this); /*获取url的信息*/
    getScoreVal(this); /*获取分数的信息*/
    //      	},500)
  },
  computed: {
    scoreValAll() {
      let scc = this.scoreVal.map(item => {
        return item.label + ":" + item.score;
      });
      return scc;
    }
  }
};
</script>

<style scoped="scoped">
input::-webkit-input-placeholder {
  color: #fff;
}

.index_nav .coler_height {
  color: yellow;
}
.index .index_nav {
  height: 60px;
  background: #001792;
  width: 100%;
  color: #fff;
  line-height: 60px;
  position: relative;
}
.index_nav:after {
  clear: both;
}
img.logo {
  width: 40px;
  height: 40px;
  margin: -15px 0 0 30px;
  vertical-align: middle;
}
span.vue_title {
  font-size: 26px;
  margin-left: 20px;
}
span.nav_title {
  font-size: 18px;
  margin-left: 120px;
  cursor: pointer;
}
span.nav_title:nth-of-type(3) {
  margin-left: 40px;
}
span.nav_title:nth-of-type(4) {
  margin-left: 40px;
}
img.off {
  float: right;
  width: 25px;
  height: 25px;
  margin: 18px 15px 0 0;
}
span.user {
  float: right;
  margin-right: 30px;
  font-size: 16px;
}
input.title_input {
  background: #001792;
  border: solid 1px #fff;
  border-radius: 40px;
  width: 240px;
  height: 25px;
  color: #fff;
  padding-left: 15px;
  padding-right: 30px;
}
.nav_title_input {
  margin-left: 40px;
  position: relative;
}
.search_input_img {
  position: absolute;
  top: 3px;
  right: 10px;
  width: 18px;
  cursor: pointer;
}
.score_val {
  display: inline-block;
  /*width: calc(100% - 955px);*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  font-size: 13px;
  margin-left: 15px;
}
</style>